import { getData5 } from '../Data'
import { FlexGrid, FlexGridColumn } from "@grapecity/wijmo.react.grid";
import { Row } from '@grapecity/wijmo.grid';

const WijmoJ02 = () => {


    const init = (init) => {
        // 创建额外的标题行
        var extraRow = new Row();
        extraRow.allowMerging = true;

        // 向网格中添加额外的标题行
        var panel = init.columnHeaders;
        panel.rows.splice(0, 0, extraRow);

        // 填充额外的标题行 // 需要合并第几列```需要手动设置
        for (let colIndex = 3; colIndex <= 4; colIndex++) {
            panel.setCellData(0, colIndex, '额外标题');
        }

        // 垂直合并“country”和“product”标题
        ['id', 'country', 'product'].forEach(function (binding) {
            let col = init.getColumn(binding)
            col.allowMerging = true
            panel.setCellData(0, col.index, col.header)
        });

        // 居中对齐合并的标题单元格
        init.formatItem.addHandler(function (s, e) {
            if (e.panel == s.columnHeaders && e.range.rowSpan > 1) {
                var html = e.cell.innerHTML;
                e.cell.innerHTML = '<div class="v-center">' + html + '</div>';
            }
        });

        init.autoGenerateColumns = false;
        init.itemsSource = getData5(100);
    }


    return (
        <div className="Page">
            <FlexGrid
                allowMerging="ColumnHeaders"
                alternatingRowStep={0}
                initialized={init}
            >
                <FlexGridColumn binding="id" header="ID" width={60} isReadOnly={true} allowMerging={true} />
                <FlexGridColumn binding="country" header="Country" allowMerging={true} />
                <FlexGridColumn binding="product" header="Product" allowMerging={true} />
                <FlexGridColumn binding="sales" header="Sales" />
                <FlexGridColumn binding="expenses" header="Expenses" />
            </FlexGrid>
        </div>
    );
};

export default WijmoJ02